<template>
	<view class="outer-padd">
		<view class="sign-item" v-for="item in signData" :key="item._id" @click="toDetail(item)">
			<view class=" sign-title" style="color: #28D094;" v-if="item.state==1">待审核</view>
			<view class=" sign-title" style="color: #2984F8;" v-if="item.state==2">待支付</view>
			<view class=" sign-title" style="color: black;" v-if="item.state==3">已签约</view>
			<view class=" sign-title" style="color: #FDDB78;" v-if="item.state==4">待续约</view>
			<view class=" sign-title" style="color: red;" v-if="item.state==0">已驳回</view>
			<view class="sign-detail">
				<view class="left-detail">
					<view class="sign-name">{{item?.teamId.name}}</view>
					<view class="sign-doctor">
						<view>医生：</view>
						<view class="right-detil">{{item?.doctorId.name}}</view>
					</view>
					<view class="sign-doctor">
						<view>服务包：</view>
						<view class="right-detil">{{item.servicePackId.name}}</view>
					</view>
				</view>
				<view class="sign-arrow">
					<image src="/static/icons/u1426.png" mode=""></image>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		getSigningDataApi
	} from '../../../api/sign';
	import {
		useUserStore
	} from '../../../store/user';
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app';
	const useStore = useUserStore()
	console.log(useStore.userInfo._id);
	// 签约的所有数据
	const signData = ref([])
	onReady(() => {
		getData()
	})
	const getData = () => {
		getSigningDataApi({
				residentId: useStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					console.log(res.data.rows);
					signData.value = res.data.rows
				}
			})
	}


	// 把点击的签约id传过去
	const toDetail = (item) => {
		uni.navigateTo({
			url: `/minePackage/pages/signing-record/signing-record?_id=${item._id}`
		})
	}
</script>

<style scoped lang="scss">
	.outer-padd {
		padding: 0 32rpx;
	}

	.sign-item {
		width: 670rpx;
		height: 280rpx;
		border: 1rpx solid #E4EBF4;
		border-radius: 20rpx;
		margin-top: 30rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f3f3f3;
	}

	.sign-title {
		font-size: 28rpx;
		color: #333333;
		padding: 30rpx 30rpx;
		border-bottom: 1rpx solid #e5e5e5;
		font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
		font-weight: 500;
	}

	.sign-detail {
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		// border: 1rpx solid #e5e5e5;
	}

	.left-detail {
		.sign-name {
			font-size: 36rpx;
			color: #333333;
		}
	}

	.sign-arrow {
		image {
			width: 20rpx;
			height: 28rpx;
		}
	}

	.sign-doctor {
		font-size: 24rpx;
		color: #999999;
		margin: 10rpx 0;
		display: flex;
	}

	.right-detil {
		margin-left: 20rpx;
	}
</style>
<style>
	page {
		background-color: #f7fafd;
		/* 自定义颜色 */
	}
</style>